<template>
  <view>
    <p-navbar title="充币">
    	<view class="jl"  @tap="record()">
    		充币记录
    	</view>
    </p-navbar>
    <view class="container">
      <view class="type">
        <view>币种：USDT</view>
      </view>
      <view class="code">
        <view class="qrcode" @longtap="saveImage">
          <image style="width:300rpx;height:300rpx;" mode="aspectFit" v-if="qrcode" :src="qrcode"></image>
        </view>
        <view class="code-saves" @tap="saveImage">保存二维码</view>
        <text class="number">{{address}}</text>
		<view class="btn">
       <view class="submit">
         <u-button
           type="primary"
           ripple
           shape="circle"
           @click="fnRegister"
           >复制地址</u-button
         >
       </view>
		</view>
      </view>
      <view class="tips">
        <view class="title">温馨提示：</view>
        <text>1：请勿向上述地址充值任何非USDT-TRC20资产，否则资产将不可找回。</text>
        <text>2：您充值至上述地址后，需要整个网络节点确认，15次网络确认后到账，30次网络确认后可提币。</text>
		<text>2：请务必确认电脑，移动设备及浏览器安全，防止信息泄露或被篡改。</text>
      </view>
    </view>
  </view>
</template>

<script>
import qr from 'qr-image';
import uniCopy from '@/components/xb-copy/uni-copy.js'
export default {
  data() {
    return {
      address: '', // 地址
	  qrcode:'',//二维码图片
    }
  },
  onLoad() {
	  this.request('myUserAddress/getMyUserAddress').then(res=>{
	 	 this.address=res.data.data.address
		  this.qrcode ='data:image/png;base64,' +uni.arrayBufferToBase64(qr.imageSync(this.address,{ margin: 2 }))
	  })
  },
  methods: {
	  //复制地址
	  fnRegister(){
		  uniCopy({
		  	content: this.address,
		  	success: (res) => {
		  		uni.showToast({
		  			title: '复制成功',
		  			icon: 'none'
		  		})
		  	},
		  	error: (e) => {
		  		uni.showToast({
		  			title: e,
		  			icon: 'none', 
		  			duration: 3000,
		  		})
		  	}
		  })
	  },
	  record(){//记录
	  uni.navigateTo({
	  	url:'./record?type=2'
	  })
	  },
    // 保存
    async saveImage() {
      const result = await this.util.capture()
      if (result) this.util.toast('保存成功', 'success')
      else this.util.toast('保存失败')
    },
  }
}
</script>

<style lang="scss" >
	.jl{
		color: $color-fu;
	}
.titles{
	margin-top: 20rpx;
	padding-left: 40rpx;
	font-size: 45rpx;
	font-family: PingFang;
	font-weight: 800;
	// line-height: 0px;
	color: #333333;
}
/deep/.u-btn {
  font-size: 35rpx;
}
.container {
  color: $color-white;
  // background: $bg-base;
  @include statusbar;
}
.type {
  @include flex;
  // border-radius: 15rpx;
  justify-content: space-between;
  padding: 20rpx 30rpx ;
  margin: 20rpx 0rpx;
font-size: 28rpx;
font-family: PingFang;
font-weight: bold;
line-height: 42rpx;
color: #333;
  view:nth-child(1) {
    font-size: 35rpx;
  }
  view:nth-child(2) {
    // color: $text-regular;
    font-size: 28rpx;
  }
}
.save {
  // background-color: $color-content;
  color: red;
}
.title1 {
  padding: 33rpx;
  font-weight: bold;
  color: #000000;
}
.cids {
  margin: 10rpx 30rpx;
  @include flex;
  text {
    color: $color-primary;
    font-size: 35rpx;
    font-weight: bold;
  }
  view {
    @include flex;
    justify-content: center;
    background-color: #F8F8F8;
    border-radius: 20rpx;
	color: #999999;
    // padding: 15rpx 40rpx;
    width: 200rpx;
    height: 65rpx;
    // @include click;
    + view {
      margin-left: 25rpx;
    }
  }
  .colorcid {
    // background-color: $bg-base;
    // border: 1rpx solid $color-primary;
    color: $light-color;
	border: 1px solid $light-color;
  }
}
.redno {
  // background-color: $text-primary;
}
.code {
  @include flex;
  flex-direction: column;
  padding: 50rpx 24rpx 60rpx 24rpx;
  .qrcode {
    border: 1rpx dashed;
	overflow: hidden;
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 30rpx;
	background-color: #CCCCCC;
  }
  &-save {
    font-size: 30rpx;
    color: $color-white;
    margin-bottom: 30rpx;
    padding: 15rpx 30rpx;
    border-radius: 20rpx;
    background-color: rgba($color-primary, 0.7);
  }
  /deep/ .u-btn {
    background-color: $color-primary !important;
    height: 58rpx;
    width: 195rpx;
    border-radius: 6rpx;
    font-size: 20rpx;
    margin-bottom: 23rpx;
  }
  .number {
    padding: 20rpx;
    font-size: 24rpx;
    font-family: PingFang;
    font-weight: bold;
    line-height: 34rpx;
    color: #333333;
    // color: $text-regular;
  }
}
.tips {
  font-size: 24rpx;
  margin: 0 50rpx;
  
color: #333333;
  .title {
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		font-size: 30rpx;
  }
  text {
		display: block;
		font-size: 20rpx;
		color:#999;
		margin-bottom: 20rpx;
		line-height: 1.4;
  }
}
.code-saves{
	border: 1px solid #FFB740;
	border-radius: 10rpx;
	text-align: center;
	padding: 15rpx 30rpx;
	font-size: 20rpx;
	font-family: PingFang;
	font-weight: 500;
	// line-height: 40rpx;
	color: #FFB740;
}
.submit {
		margin: 10rpx 64rpx 20rpx;
		/deep/ .u-btn {
			background-color: $light-color !important;
			// box-shadow: 0 17rpx 40rpx rgba(#2196F3, .3);
			transition: .3s;
			height: 70rpx;
			border-radius: 20rpx;
		}
	}
</style>
